<template>
  <!-- 歌曲列表项-->
    <div :class="{song:true,active: isHover && !isStay,chooseActive:isStay}"
         @mouseenter="isHover = true"
         @mouseleave="isHover = false"
         :title="musicDetail.musicName+aliaName">
        <div class="song-img">
            <el-image
                    :src="musicDetail.picUrl"
                    fit="cover"></el-image>
        </div>
        <div class="song-info">
            <div>{{ musicDetail.musicName }}<span>{{ aliaName }}</span></div>
            <!--用于往歌手详情页面跳转-->
            <div>
                <router-link
                        v-for="(item,index) in musicDetail.singers"
                        :to="{
                            name:'singer-detail',
                            params:{
                                id:item.id
                            }
                        }"
                        :key="index">
                    {{ item.name }}{{ index === musicDetail.singers.length - 1 ? '' : ',' }}
                </router-link>
            </div>
        </div>
        <div class="song-album">
            <!-- 跳转到专辑详情页面-->
            <router-link :to="{
                name:'album-detail',
                params:{
                    id:musicDetail.albumName.alId
                }
            }">
                {{ musicDetail.albumName.alName }}
            </router-link>
        </div>
        <div class="song-time">
            {{ formatMusicTime(Number.parseInt(musicDetail.time), 'ms') }}
        </div>
    </div>
</template>

<script>
import {formatMusicTime} from "@/http/tools";
import {SHOWITEMBG} from "@/http/constant";

export default {
    name: "SongItem",
    methods: {formatMusicTime},
    props: ['musicDetail', 'isCanShowBg'],
    data() {
        return {
            // musicDetail: {
            //     id: '2019599118',
            //     musicName: "Love Comes To Find You",
            //     singers: [
            //         {
            //             "id": 54628938,
            //             "name": "EMAX Sounds Official电子最之声",
            //             "tns": [],
            //             "alias": []
            //         },
            //         {
            //             "id": 49439547,
            //             "name": "Awe Of Nature敬畏自然",
            //             "tns": [],
            //             "alias": []
            //         }
            //     ],
            //     picUrl: 'https://p1.music.126.net/oUzWIccBO1A5YOAOubgQ9w==/109951168282632898.jpg',
            //     albumName: 'The Origin Of Dreams',
            //     time: '321081'
            // }
            isHover: false,
            isStay: false
        }
    },
    mounted() {
        // 当双击的时候固定显示其背景颜色
        this.$bus.$on(SHOWITEMBG, d => {
            // flag是另外一个标记便于播放列表不显示背景
            const {id} = d
            const {isCanShowBg, musicDetail} = this
            // 只有true的时候才会切换背景
            if (isCanShowBg) {
                this.isStay = id.toString() === musicDetail.id.toString()
            }
        })
    },
    computed: {
        // 格式化歌手信息
        singersStr() {
            const newSingers = this.musicDetail.singers.map(item => {
                return item.name
            })
            return newSingers.join(', ')
        },
        // 歌曲别名
        aliaName() {
            const {alia} = this.musicDetail
            if (alia.length) {
                return ` (${this.musicDetail.alia.join(',')})`
            } else {
                return ''
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.song {
  display: flex;
  height: 4vw;
  width: 100%;
  align-items: center;
  font-size: .9vw;
  border-radius: .7vw;
  //歌曲专辑图片
  .song-img {
    width: 5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    > .el-image {
      height: 75%;
      border-radius: 15%;
      margin-left: 5%;
    }
  }

  //歌曲名字和歌手
  .song-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 45%;
    padding: 0 10% 0 1%;

    div:nth-child(1) {
      font-weight: bolder;
      font-size: 1vw;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;

      > span {
        color: @metaphorFont;
      }
    }

    div:nth-child(2) {
      font-size: .8vw;
      margin-top: 1%;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;

      > a {
        color: @metaphorFont;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  //音乐专辑名字
  .song-album {
    height: 100%;
    width: 40%;
    display: flex;
    align-items: center;

    > a {
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .song-time {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.active {
  background-color: @mouseHover;
  cursor: pointer;
}

.chooseActive {
  background-color: @bgColor;
  color: @mainColor;
}
</style>